<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :model="parm" :inline="true" size="default">
            <el-form-item>
                <el-input v-model="parm.goodsName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="searchBtn" icon="Search">搜索</el-button>
                <el-button @click="resetBtn" type="danger" plain icon="Close">重置
                </el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :height="tableHeight" :data="tableList" border stripe>
            <el-table-column label="商品图片" prop="goodsImage">
                <template #default="scope">
                    <el-image v-if="scope.row.goodsImage" style="width: 100px; height:
60px" :src="scope.row.goodsImage.split(',')[0]" />
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goodsName"></el-table-column>
            <el-table-column label="期望价格" prop="goodsPrice"></el-table-column>
            <el-table-column label="交易价格" prop="price"></el-table-column>
            <el-table-column label="购买人" prop="orderBuy"></el-table-column>
            <el-table-column label="交易时间" prop="orderCreateTime"
                :formatter="(_row: any, _column: any, cellValue: string) => new Date(cellValue).toLocaleString('zh-CN')"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="parm.currentPage"
            :page-sizes="[10, 20, 40, 80, 100]" :page-size="parm.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="parm.total" background>
        </el-pagination>
    </el-main>
</template>
<script setup lang="ts">
// import moment from 'moment'
import { nextTick, onMounted, reactive, ref } from 'vue';
import { getListApi } from '@/api/order/index'
//表格高度
const tableHeight = ref(0)
//参数
const parm = reactive({
    currentPage: 1,
    pageSize: 10,
    goodsName: '',
    total: 0
})
//表格数据
const tableList = ref([])
//获取列表
const getList = async () => {
    let res = await getListApi(parm)
    if (res && res.code == 200) {
        console.log(res)
        //设置表格数据
        tableList.value = res.data.rows;
        parm.total = res.data.total;
    }
}

//页容量改变时触发
const sizeChange = (size: number) => {
    parm.pageSize = size;
    getList()
}
//页数改变时触发
const currentChange = (page: number) => {
    parm.currentPage = page;
    getList();
}
//搜索
const searchBtn = () => {
    getList()
}
//重置
const resetBtn = () => {
    parm.currentPage = 1;
    parm.goodsName = ""
    getList()
}
onMounted(() => {
    nextTick(() => {
        tableHeight.value = window.innerHeight - 200
    })
    getList()
})
</script>
<style scoped></style>